<template>
  <div class="cart">
    <!-- nav start -->
    <Header />
    <!-- nav end -->
    <div class="cart_main">
      <div class="cart_box">
        <div class="cart_top">
          <div class="cart_top_left">
            <div class="cart_top_img">
              <img src="" alt="" />
            </div>
            <p>购物车</p>
          </div>
          <div class="cart_top_right">
            <input type="checkbox" :checked="isAllChecked" />
            <p>全选</p>
          </div>
        </div>
        <div class="cart_box2">
          <div class="cart_item">
            <div class="cart_item_left">
              <div class="cart_item_leBox">
                <input type="checkbox" :checked="checked" />
                <div class="cart_item_img"><img src="" alt="" /></div>
              </div>
              <div class="cart_item_riBox">
                <div class="cart_middle_title">名称</div>
                <div class="cart_middle_guige">
                  <p>已选规格:xxxx</p>
                  <div class="cart_guige_item">
                    <p>购买数量:</p>
                    <div class="guige_item_jian" @click="small">-</div>
                    <div class="guige_item_num">{{ num }}</div>
                    <div class="guige_item_jia" @click="more">+</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="cart_item_right">移除购物车</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 结算 -->
    <div class="footer">
      <div class="footer_main">
        <div class="footer_left">
          <div>￥{{ price }}</div>
          <div>商品{{ total }}件</div>
        </div>
        <div class="footer_right">结算</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: true,
      isAllChecked: false,
      total: 1020,
      price: 2899,
      num: 20,
    };
  },
  methods: {
    small() {
      this.num--;
    },
    more() {
      this.num++;
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/cart.css");
</style>